<template>
  <n-flex class="login-bg w-screen h-screen"
          align="center"
          justify="center"
          vertical>
    <n-card class="w-96 drop-shadow-xl" bordered>
      <n-space vertical>
        <n-space justify="center" align="center">
          <n-image :src="Logo" width="32" height="32" preview-disabled/>
          <n-text class="text-xl">Admin Liberty</n-text>
        </n-space>
        <n-form
            ref="formRef"
            label-placement="left"
            :model="formState">
          <n-form-item label="账号" path="username">
            <n-input v-model:value="formState.username" placeholder="请输入"/>
          </n-form-item>
          <n-form-item label="密码" path="password">
            <n-input v-model:value="formState.password" type="password" placeholder="请输入"/>
          </n-form-item>
          <n-form-item>
            <n-button class="w-full" type="primary" @click="onFinish" :disabled="disabled">登录</n-button>
          </n-form-item>
        </n-form>
      </n-space>
    </n-card>
  </n-flex>
</template>
<script setup>
import {computed, reactive} from 'vue';
import {login} from '@/apis/sys/user';
import {homeRouterName} from "@/router/routes.js";
import {useRouter} from "vue-router";
import {useAuthStore} from "@/store/sys/auth.js";
import {useUserStore} from "@/store/sys/user.js";
import Logo from '@/assets/logo.png'

const authStore = useAuthStore();
const userStore = useUserStore();
const router = useRouter();

const formState = reactive({
  username: 'admin',
  password: '123456',
})

const onFinish = async () => {
  authStore.$reset()
  userStore.$reset()
  const {code, data} = await login(formState);
  if (code === 0) {
    authStore.setTokenInfo(data)
    await router.push({name: homeRouterName, replace: true});
  }
}

const disabled = computed(() => {
  return !(formState.username && formState.password);
});
</script>
<style scoped>
.login-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  background-image: url("/src/assets/login_bg.jpg");
  background-size: cover;
  background-position: center;
}
</style>
